import { useEffect, useState } from "react";
import { Button, Drawer, Divider, Switch } from "tdesign-react";
import { Setting1Icon } from "tdesign-icons-react";
import { connect } from "react-redux";
import { setThemeConfig } from "@/redux/modules/global/action";
import { updateCollapse } from "@/redux/modules/menu/action";
import SwitchTheme from "@/components/SwitchTheme";
import useTheme from "@/hooks/useTheme";

const Setting = (props: any) => {
	const [visible, setVisible] = useState(false);
	const { setThemeConfig, updateCollapse } = props;
	const { themeConfig } = props.global;
	const { isCollapse } = props.menu;
	const { weakOrGray, breadcrumb, tabs, footer } = themeConfig;
	const handleClick = () => {
		setVisible(true);
	};
	const handleClose = () => {
		setVisible(false);
	};
	const setWeakOrGray = (checked: boolean, theme: string) => {
		if (checked) return setThemeConfig({ ...themeConfig, weakOrGray: theme });
		setThemeConfig({ ...themeConfig, weakOrGray: "" });
	};
	const onChange = (checked: boolean, keyName: string) => {
		return setThemeConfig({ ...themeConfig, [keyName]: !checked });
	};
	useEffect(() => {
		useTheme(themeConfig);
	}, [weakOrGray]);
	return (
		<>
			<Button variant="text" onClick={handleClick}>
				<Setting1Icon />
			</Button>
			<Drawer header="布局设置" footer={null} visible={visible} onClose={handleClose}>
				<Divider>全局主题</Divider>
				<div className="theme-item">
					<span>暗黑模式</span>
					<SwitchTheme />
				</div>
				<div className="theme-item">
					<span>灰色模式</span>
					<Switch
						value={weakOrGray === "gray"}
						onChange={e => {
							setWeakOrGray(e, "gray");
						}}
					/>
				</div>
				<Divider>界面设置</Divider>
				<div className="theme-item">
					<span>折叠菜单</span>
					<Switch
						value={isCollapse}
						onChange={e => {
							updateCollapse(e);
						}}
					/>
				</div>
				<div className="theme-item">
					<span>面包屑导航</span>
					<Switch
						value={!breadcrumb}
						onChange={e => {
							onChange(e, "breadcrumb");
						}}
					/>
				</div>
				<div className="theme-item">
					<span>标签栏</span>
					<Switch
						value={!tabs}
						onChange={e => {
							onChange(e, "tabs");
						}}
					/>
				</div>
				<div className="theme-item">
					<span>页脚</span>
					<Switch
						value={!footer}
						onChange={e => {
							onChange(e, "footer");
						}}
					/>
				</div>
			</Drawer>
		</>
	);
};
const mapStateToProps = (state: any) => state;
const mapDispatchToProps = { setThemeConfig, updateCollapse };
export default connect(mapStateToProps, mapDispatchToProps)(Setting);
